<template>
  <div class="commentBox">
    <div class="commentTit">
      <span class="titName">评论</span>
      <span class="titTotal">共{{ commentObj.total }}条评论</span>
    </div>
    <div class="myComment">
      <img
        v-if="isLogin"
        :src="userInfo.profile.avatarUrl"
        class="avatarUrl"
        alt=""
      />
      <img
        v-if="!isLogin"
        :src="require('@/assets/imges/nologin.jpg')"
        class="avatarUrl"
        alt=""
      />
      <div class="commentInputBox">
        <textarea
          class="commentInput"
          v-model="myCommentVal"
          maxlength="140"
          placeholder="评论"
        ></textarea>
        <div class="addComment">
          <span>{{ myCommentSize }}</span>
          <div class="addCommentBtn" @click="addMyComment">评论</div>
        </div>
      </div>
    </div>
    <div
      class="wonderfulComments"
      v-if="commentObj.hotComments && commentObj.hotComments.length > 0"
    >
      <p class="wonderfulCommentsTop">精彩评论</p>
      <ul>
        <li v-for="item in commentObj.hotComments" :key="item.commentId">
          <img
            class="commentsItemAvatarUrl"
            :src="item.user.avatarUrl"
            alt=""
          />
          <div class="commentsItemRight">
            <div>
              <span class="commentsItemNickname"
                >{{ item.user.nickname }}：</span
              >
              <span class="commentsItemContent">{{ item.content }}</span>
              <div class="otherComments" v-if="item.beReplied.length > 0">
                <span class="commentsItemNickname"
                  >{{ item.beReplied[0].user.nickname }}：</span
                ><span class="commentsItemContent">{{
                  item.beReplied[0].content || "该评论已删除"
                }}</span>
              </div>
            </div>
            <div class="commentsNotes">
              <span>{{ item.time | fmtDate("MM月DD日 hh:mm") }}</span>
              <div class="fabulousBox">
                <span
                  v-if="isLogin && item.user.userId === userInfo.profile.userId"
                  @click="delcomments(item.commentId)"
                  >删除 |
                </span>
                <i
                  class="yesFabulous"
                  v-if="item.liked"
                  @click="clickNoFabulous(item.commentId)"
                ></i>
                <i
                  class="noFabulous"
                  v-if="!item.liked"
                  @click="clickYesFabulous(item.commentId)"
                ></i>
                <span>({{ item.likedCount | likedCountfilter }})</span> |
                <span @click="chengeReplyId(item.commentId)">回复</span>
              </div>
            </div>
            <div class="replyBox" v-if="replyId == item.commentId">
              <div>
                <textarea class="replyInput" v-model="replyContent"></textarea>
                <div class="replyBtnBox">
                  <span>140</span>
                  <div class="replyBtn" @click="reply(item.commentId)">
                    回复
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div
      class="wonderfulComments"
      v-if="commentObj.comments && commentObj.comments.length > 0"
    >
      <p class="wonderfulCommentsTop">最新评论({{ commentObj.total }})</p>
      <ul>
        <li v-for="item in commentObj.comments" :key="item.commentId">
          <img
            class="commentsItemAvatarUrl"
            :src="item.user.avatarUrl"
            alt=""
          />
          <div class="commentsItemRight">
            <div>
              <span class="commentsItemNickname"
                >{{ item.user.nickname }}：</span
              >
              <span class="commentsItemContent">{{ item.content }}</span>
              <div class="otherComments" v-if="item.beReplied.length > 0">
                <span class="commentsItemNickname"
                  >{{ item.beReplied[0].user.nickname }}：</span
                ><span class="commentsItemContent">{{
                  item.beReplied[0].content || "该评论已删除"
                }}</span>
              </div>
            </div>
            <div class="commentsNotes">
              <span>{{ item.time | fmtDate("MM月DD日 hh:mm") }}</span>
              <div class="fabulousBox">
                <span
                  v-if="isLogin && item.user.userId === userInfo.profile.userId"
                  @click="delcomments(item.commentId)"
                  >删除 |
                </span>
                <i
                  class="yesFabulous"
                  v-if="item.liked"
                  @click="clickNoFabulous(item.commentId)"
                ></i>
                <i
                  class="noFabulous"
                  v-if="!item.liked"
                  @click="clickYesFabulous(item.commentId)"
                ></i>
                <span>({{ item.likedCount | likedCountfilter }})</span> |
                <span @click="chengeReplyId(item.commentId)">回复</span>
              </div>
            </div>
            <div class="replyBox" v-if="replyId == item.commentId">
              <div>
                <textarea class="replyInput" v-model="replyContent"></textarea>
                <div class="replyBtnBox">
                  <span>140</span>
                  <div class="replyBtn" @click="reply(item.commentId)">
                    回复
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="pagingBox">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="commentObj.total"
        :page-size="20"
        :current-page.sync="contnetPage"
        :hide-on-single-page="true"
        @current-change="pageNumChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { addComment, fabulous } from "@/api";
export default {
  props: {
    //资源id
    resourcesId: {
      type: Number,
      default: 0,
    },
    //资源类型
    resourcesType: {
      type: Number,
      default: 0,
    },
    commentObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      contnetPage: 1, //分页
      myCommentVal: "", //评论内容
      replyId: "", //点击回复的id
      replyContent: "", //回复评论内容
    };
  },
  filters: {
    likedCountfilter(val) {
      if (val > 100000) {
        return (val / 10000).toFixed(1) + "万";
      }
      return val;
    },
  },
  computed: {
    ...mapState("loginStore", ["userInfo"]),
    ...mapGetters("loginStore", ["isLogin"]),
    myCommentSize() {
      return 140 - this.myCommentVal.length;
    },
  },
  methods: {
    //添加评论
    addMyComment() {
      if (!this.util.loginVerification()) return;
      if (this.myCommentVal.trim() == "") return;
      addComment({
        t: 1,
        type: this.resourcesType,
        id: this.resourcesId,
        content: this.myCommentVal,
      }).then((res) => {
        if (res.code == 200) {
          this.myCommentVal = "";
          this.$message({
            message: "评论成功",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$emit("getComment");
            },
          });
        }
      });
    },
    //分页
    pageNumChange() {
      this.$emit("getComment", this.contnetPage);
    },
    //点赞
    clickYesFabulous(commentId) {
      if (!this.util.loginVerification()) return;
      fabulous({
        id: this.resourcesId,
        cid: commentId,
        t: 1,
        type: this.resourcesType,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "点赞成功",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$emit("getComment");
            },
          });
        }
      });
    },
    //取消点赞
    clickNoFabulous(commentId) {
      if (!this.util.loginVerification()) return;
      fabulous({
        id: this.resourcesId,
        cid: commentId,
        t: 0,
        type: this.resourcesType,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "取消点赞成功",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$emit("getComment");
            },
          });
        }
      });
    },
    //点击回复
    chengeReplyId(id) {
      if (!this.util.loginVerification()) return;
      if (id == this.replyId) {
        this.replyId = "";
      } else {
        this.replyId = id;
      }
      this.replyContent = "";
    },
    //回复评论
    reply(commentId) {
      if (this.replyContent.trim() == "") return;
      addComment({
        t: 2,
        type: this.resourcesType,
        id: this.resourcesId,
        content: this.replyContent,
        commentId,
      }).then((res) => {
        this.replyId = "";
        this.$message({
          message: "回复成功",
          type: "success",
          duration: 1000,
          onClose: () => {
            this.$emit("getComment");
          },
        });
      });
    },
    //删除评论
    delcomments(id) {
      console.log(id);
      addComment({
        t: 0,
        type: this.resourcesType,
        id: this.resourcesId,
        commentId: id,
      }).then((res) => {
        if (res.code == 200) {
          this.myCommentVal = "";
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$emit("getComment");
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.commentBox {
  .commentTit {
    border-bottom: 2px solid #c20c0c;
    height: 33px;
    .titName {
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
    }
    .titTotal {
      margin: 9px 0 0 20px;
      margin: 9px 0 0 20px;
      font-size: 12px;
    }
  }
  .myComment {
    display: flex;
    margin-top: 20px;
    .avatarUrl {
      width: 50px;
      height: 50px;
    }
    .commentInputBox {
      flex: 1;
      margin-left: 10px;
      .commentInput {
        height: 70px;
        margin: 0;
        padding: 5px 6px 6px;
        border: 1px solid #cdcdcd;
        border-radius: 2px;
        line-height: 19px;
        box-sizing: border-box;
        resize: none;
        font-size: 12px;
        color: #333;
        width: 100%;
        outline: none;
      }
      .addComment {
        text-align: right;
        color: #999;
        margin-top: 10px;
        .addCommentBtn {
          background: url("./../../assets/imges/btnBackground.png") no-repeat -84px -64px;
          width: 46px;
          height: 25px;
          color: #fff;
          text-align: center;
          line-height: 25px;
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
  }
  .wonderfulComments {
    .wonderfulCommentsTop {
      height: 20px;
      border-bottom: 1px solid #cfcfcf;
      font-size: 12px;
      font-weight: 700;
      margin-top: 20px;
    }
    li {
      border-bottom: 1px dotted #ccc;
      display: flex;
      padding: 15px 0;
      .commentsItemAvatarUrl {
        width: 50px;
        height: 50px;
        vertical-align: middle;
        margin-right: 10px;
      }
      .commentsItemRight {
        flex: 1;
        .commentsItemNickname {
          color: #0c73c2;
          margin-right: 5px;
          font-size: 12px;
          cursor: pointer;
          line-height: 20px;
          float: left;
        }
        .commentsItemContent {
          line-height: 20px;
          font-size: 12px;
        }
        .commentsNotes {
          display: flex;
          justify-content: space-between;
          margin-top: 15px;
          color: #333;
          .fabulousBox {
            i {
              background: url("./../../assets/imges/iconOne.png") no-repeat -150px
                0;
              display: inline-block;
              width: 15px;
              height: 14px;
            }
            .noFabulous {
              background-position: -150px 0;
            }
            .yesFabulous {
              background-position: -170px 0;
            }
          }
        }
        .otherComments {
          padding: 8px 19px;
          margin-top: 10px;
          line-height: 20px;
          background: #f4f4f4;
          border: 1px solid #dedede;
        }
        .replyBox {
          padding: 15px;
          background: #f8f8f8;
          border: 1px solid #fcfcfc;
          border-radius: 2px;
          border: 1px solid #d9d9d9;
          margin-top: 15px;
          .replyInput {
            resize: none;
            width: 100%;
            outline: none;
            padding: 5px 6px 6px;
            border: 1px solid #cdcdcd;
            border-radius: 2px;
            box-sizing: border-box;
            font-size: 12px;
            color: #333;
            overflow: hidden;
          }
          .replyBtnBox {
            text-align: right;
            margin-top: 5px;
            color: #333;
            .replyBtn {
              background: url("./../../assets/imges/btnBackground.png")
                no-repeat -84px -64px;
              width: 46px;
              height: 25px;
              color: #fff;
              text-align: center;
              line-height: 25px;
              margin-left: 10px;
              display: inline-block;
            }
          }
        }
      }
    }
  }
  .pagingBox {
    text-align: center;
    margin: 20px 0;
  }
}
</style>